<template>
  <div>
    <h2>Vuex 入门学习</h2>
    <div v-if="flag1">
      <h4 @click="count1++">count--{{ count1 }}--{{ count2 }}--{{ count3 }}</h4>
      <h4>city--{{ city1 }}--{{ city2 }}</h4>
      <h4>word--{{ word1 }}</h4>
      <h4>text--{{ text }}</h4>
      <h4>msg--{{ msg }}</h4>
    </div>
    <button @click="countAdd">count+1</button>
    <button @click="countReduce">count-1</button>
    <button @click="changeCount(100)">count change</button>
    <button @click="changeCity('海王星')">city change</button>
    <button @click="changeWord('wh2105-daydayup')">wh2105-daydayup</button>
    <button @click="changeFlag">点击隐藏出现</button>
    <p><input type="text" placeholder="修改 text" @input="change" /></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count1: this.$store.state.count,
      city1: this.$store.state.city,
    };
  },
  computed: {
    count2() {
      return this.$store.state.count;
    },
    count3() {
      return this.$store.state.count;
    },
    city2() {
      return this.$store.state.city;
    },
    flag1() {
      return this.$store.state.flag;
    },
    word1() {
      return this.$store.state.word;
    },
    newCount() {
      return this.$store.getters.newCount;
    },
    text() {
      return this.$store.state.text;
    },
    msg() {
      return this.$store.state.msg;
    },
  },
  methods: {
    countAdd() {
      this.$store.commit("countAdd");
    },
    countReduce() {
      this.$store.commit("countReduce");
    },
    changeCount(n) {
      this.$store.commit("changeCount", n);
    },
    changeCity(city) {
      this.$store.commit("changeCity", city);
    },
    changeWord(word) {
      this.$store.commit("changeWord", word);
    },
    changeFlag(state) {
      this.$store.commit("changeFlag");
    },
    change(e) {
      this.$store.commit("changeText", e.target.value);
      this.$store.commit("changeMsg", e.target.value);
    },
  },
  getters: {
    /* 派生属性 依赖 getter (计算属性) */
    newCount(state) {
      return stase.count * 2 + 888;
    },
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>